<template>
    <div>
        <swiper :slides-per-view="1" class="md:w-2/3 w-full h-96">
            <swiper-slide v-for="i in commentList" :key="i.id" class="slide-container w-full h-full p-3">
                <div
                    class="
                        text-right
                        bg-gradient-to-r bg-clip-text
                        text-transparent
                        from-pink-600
                        via-yellow-500
                        to-blue-600
                    "
                >
                    写于：{{ handlerDate(i.time) }}
                </div>
                {{ i.content }}
            </swiper-slide>
        </swiper>

        <div class="mt-5 flex justify-between p-3">
            <div>记录每日点滴</div>
            <router-link to="/noteBook">
                <button class="bg-gradient-to-r from-yellow-500 to-pink-500 text-white px-4 py-2">写日记</button>
            </router-link>
        </div>
    </div>
</template>

<script>
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/swiper-bundle.min.css'
import dayjs from 'dayjs'

// api
import { fetchComment } from '../api/comment'

export default {
    components: {
        Swiper,
        SwiperSlide,
    },

    data: () => ({
        commentList: [],
    }),

    beforeMount() {
        this.fetchData()
    },

    methods: {
        async fetchData() {
            const {
                data: { data },
            } = await fetchComment(this.$http, this.$store.state.user.account)
            this.commentList = data
        },

        handlerDate(time) {
            return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
        },
    },
}
</script>

<style scoped>
.slide-container {
    background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7)), url('../assets/book-bg.jpg');
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center center;
}
</style>
